<template>
  <footer :style="{'background-color': bgColor}">

    <div class="foot-main">
      <div class='foot-logo'>
        <!-- <img class='logo02' src="@/assets/logo02.png"> -->
        <img class='factory' src="@/assets/foot-factory.png">
      </div>
      <div class="foot-c">
        <ul>
            <li>关于我们</li>
            <li>｜</li>
            <li>联系我们</li>
            <li>｜</li>
            <li>意见反馈</li>
            <li>｜</li>
            <li>版权声明</li>
          </ul>
          <div>Copyrignt© 2023  京ICP备  12003892号-11  京公网安备11010802030151号  营业执照</div>
      </div>
      <div class="wx">
          <ul>
            <li>
              <img src="@/assets/my-wx.png" />
              <span>开发者微信1</span>
            </li>
            <li>
              <img src="@/assets/wx2.jpg" />
              <span>开发者微信2</span>
            </li>
          </ul>
      </div>
    </div>

  </footer>
</template>

<script setup>
// defineProps 
// 第三种
defineProps({
  bgColor:{
    type: String,
    default: "#3483ff"
  }
});

</script>

<style scoped>
footer{
  width: 100%;
  height: 187px;
}
.foot-main{
  width: 1100px;
  height: 187px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foot-logo{
	display: flex;
	align-items: center;
}
footer .logo02{
  width: 127px;
  height: 50px;
}
footer .factory{
  width: 130px;
  height: 110px;
}
.foot-c {
  color:#fff;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 31px;
}
.foot-c ul{
  display: flex;
  color:#fff;
}
.wx img{
  width: 70px;
  height: 70px;
  object-fit: cover;
}
.wx ul{
  display: flex;
  color:#fff;
  font-size: 12px;
}
.wx ul li{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wx ul li + li{
  margin-left: 10px;
}
.wx ul li span{
  margin-top: 10px;
}
</style>